<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl - camera cinematic</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="../css/style.css">
    <style>
        body {
            background-color: #000;
            color: #000;
        }

        a {
            color: #08f;
        }

        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px 50px;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
        }
    </style>
</head>

<body>

    <button id="copy" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"></button>




    <script src="../build/three.min.js"></script>
    <script src="../js/controls/OrbitControls.js"></script>
    <script src="../js/controls/TransformControls.js"></script>
    <script src="../js/libs/dat.gui.min.js"></script>
    <script src="../../js/gsap/gsap.min.js"></script>

    <script src="./init.js?v=20220101"></script>
    <script>
        console.log(dat);
        camera.position.set(0, 0, 30);
        const ARC_SEGMENTS = 4;

        const raycaster = new THREE.Raycaster();
        const onUpPosition = new THREE.Vector2();
        const onDownPosition = new THREE.Vector2();
        const point = new THREE.Vector3();
        let pointNew = new THREE.Vector3();

        const pointer = new THREE.Vector2();
        const splineHelperObjects = [];
        const splines = {}
        let transformControl;

        const geometryBox = new THREE.BoxGeometry(2, 2, 2);
        const meshs = []

        const gui = new dat.GUI();
        create();
        function create() {
            let controlP1 = { x: -5, y: 15, z: 0 }
            let controlP2 = { x: 20, y: 15, z: 0 }
            // addSplineObject(controlP1)
            // addSplineObject(controlP2)


            const curve = new THREE.CubicBezierCurve3(
                new THREE.Vector3(-10, 0, 0),
                new THREE.Vector3(-5, 15, 0),
                new THREE.Vector3(20, 15, 0),
                // new THREE.Vector3(controlP2.x, controlP2.y, controlP2.z),
                new THREE.Vector3(10, 0, 0)
            );
            // const points = curve.getPoints(4);
            const geometry = new THREE.BufferGeometry().setFromPoints(curve.getPoints(ARC_SEGMENTS));
            // geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(ARC_SEGMENTS * 3), 3));


            curve.curveType = "bsr"
            // curve.mesh.castShadow = true;
            curve.mesh = new THREE.Line(geometry.clone(), new THREE.LineBasicMaterial({
                color: 0xff0000,
                opacity: 0.35
            }));
            splines.bsr = curve;
            scene.add(splines.bsr.mesh);

            console.log(splines);
            // const material = new THREE.LineBasicMaterial({ color: 0xff0000 });

            // // Create the final object to add to the scene
            // const curveObject = new THREE.Line(geometry, material);

            // console.log(curveObject);
            // scene.add(curveObject);




            const helper = new THREE.GridHelper(20, 1);
            helper.position.y = - 1.99;
            helper.material.opacity = 0.25;
            helper.material.transparent = true;
            scene.add(helper);



            document.addEventListener('pointerdown', onPointerDown);
            document.addEventListener('pointerup', onPointerUp);
            document.addEventListener('pointermove', onPointerMove);
            window.addEventListener('resize', onWindowResize);



            // gui.add(controlP1, "x")
            //     .min(0)
            //     .max(10)
            //     .step(0.01)
            //     .name("移动x轴")
            //     // .onChange()
            //     .onChange((value) => {
            //         console.log(value);
            //         controlP1.x = value;

            //         animate()
            //     })




            transformControl = new THREE.TransformControls(camera, renderer.domElement);
            transformControl.addEventListener('change', animate);
            transformControl.addEventListener('dragging-changed', function (event) {

                controls.enabled = !event.value;

            });
            scene.add(transformControl);

            transformControl.addEventListener('objectChange', function (value1) {

                updateSplineOutline()
            });


            // updateSplineOutline()

            animate()
        }


        function updateSplineOutline() {

            const spline = splines.bsr;

            const splineMesh = spline.mesh;
            const position = splineMesh.geometry.attributes.position;
            spline.v1 = pointNew;
            console.log(spline);
            // console.log(pointNew);
            for (let i = 0; i < ARC_SEGMENTS; i++) {

                const t = i / (ARC_SEGMENTS - 1);
                spline.getPoint(t, point); // 将spline.getPoint(t, point)的结果复制到point中
console.log(point);
                position.setXYZ(i, point.x, point.y, point.z);

            }

            position.needsUpdate = true;

        }


        function addSplineObject(position) {

            const material = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
            const object = new THREE.Mesh(geometryBox, material);

            if (position) {

                object.position.copy(position);

            } else {

                object.position.x = Math.random() * 1000 - 500;
                object.position.y = Math.random() * 600;
                object.position.z = Math.random() * 800 - 400;

            }

            object.castShadow = true;
            object.receiveShadow = true;
            scene.add(object);
            splineHelperObjects.push(object);
            return object;

        }



        function onPointerDown(event) {
            onDownPosition.x = event.clientX;
            onDownPosition.y = event.clientY;
            console.log(splineHelperObjects);
        }

        function onPointerUp() {

            onUpPosition.x = event.clientX;
            onUpPosition.y = event.clientY;

            if (onDownPosition.distanceTo(onUpPosition) === 0) transformControl.detach();

        }

        function onPointerMove(event) {

            pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
            pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(pointer, camera);
            const intersects = raycaster.intersectObjects(splineHelperObjects, false);


            if (intersects.length > 0) {

                const object = intersects[0].object;

                if (object !== transformControl.object) {
                    pointNew = object.position

                    transformControl.attach(object);

                }

            }

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

            animate();

        }


    </script>

</body>

</html>